<template>
  <div class="overtime-apply-list">
    <router-link to="/main/renshi/kaoqing" class="back-link"><i class="el-icon-arrow-left">返回</i></router-link>
    <h2 class="page-title">加班申请单列表</h2>

    <!-- 添加搜索框 -->
    <div class="search-bar">
      <el-input v-model="searchForm.employeeId" placeholder="工号" style="width: 200px; margin-right: 10px;" />
      <el-input v-model="searchForm.name" placeholder="姓名" style="width: 200px; margin-right: 10px;" />
      <el-input v-model="searchForm.department" placeholder="部门/组别" style="width: 200px; margin-right: 10px;" />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary">
        <router-link to="/main/renshi/kaoqing/jiabansq" style="color:#fff ">新增记录</router-link>
      </el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%" class="table">
      <el-table-column prop="employeeId" label="工号" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="department" label="部门/组别" width="150"></el-table-column>
      <el-table-column prop="overtimeDate" label="加班日期" width="120"></el-table-column>
      <el-table-column prop="overtimePeriod" label="加班时间" width="120"></el-table-column>
      <el-table-column prop="totalHours" label="共计加班(H)" width="120"></el-table-column>
      <el-table-column prop="reason" label="加班事由" width="200"></el-table-column>
      <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
      <el-table-column prop="reviewer" label="审核人" width="120"></el-table-column>
      <el-table-column prop="approver" label="批准人" width="120"></el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" class="pagination">
    </el-pagination>

    <!-- 详情对话框 -->
    <el-dialog title="加班申请详情" :visible.sync="dialogVisible" width="70%" class="dialog">
      <div v-if="detailData">
        <el-descriptions :column="3" border class="descriptions">
          <el-descriptions-item label="工号">{{ detailData.employeeId }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ detailData.name }}</el-descriptions-item>
          <el-descriptions-item label="部门/组别">{{ detailData.department }}</el-descriptions-item>
          <el-descriptions-item label="加班日期">{{ formatDate(detailData.overtimeDate) }}</el-descriptions-item>
          <el-descriptions-item label="加班时间">{{ detailData.overtimePeriod }}</el-descriptions-item>
          <el-descriptions-item label="共计加班(H)">{{ detailData.totalHours }}</el-descriptions-item>
          <el-descriptions-item label="加班事由">{{ detailData.reason }}</el-descriptions-item>
          <el-descriptions-item label="申请日期">{{ formatDate(detailData.applicationDate) }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ detailData.applicant }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{ detailData.reviewer }}</el-descriptions-item>
          <el-descriptions-item label="批准人">{{ detailData.approver }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOvertimeApplyList, getOvertimeApplyDetail, deleteOvertimeApply } from '@/api/overtimeApply';

export default {
  data() {
    return {
      searchForm: {
        employeeId: '',
        name: '',
        department: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      detailData: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await getOvertimeApplyList({
          current: this.currentPage,
          size: this.pageSize,
          employeeId: this.searchForm.employeeId,
          name: this.searchForm.name,
          department: this.searchForm.department
        });
        this.tableData = response.records;
        this.total = response.total;
      } catch (error) {
        this.$message.error('获取数据失败：' + error.message);
      }
    },
    async handleDetail(row) {
      try {
        const response = await getOvertimeApplyDetail(row.id);
        this.detailData = response.data;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error('获取详情失败：' + error.message);
      }
    },
    handleEdit(row) {
      this.$router.push(`/main/renshi/kaoqing/jiabansq?id=${row.id}`);
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该加班申请？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        await deleteOvertimeApply(row.id);
        this.$message.success('删除成功');
        this.fetchData();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败：' + error.message);
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleDateString();
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    }
  }
};
</script>

<style scoped>
.overtime-apply-list {
  font-family: '宋体', sans-serif;
  padding: 20px;
  /* background-color: #f9f9f9;   */
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  height: calc(100vh - 40px);
  width: 1200px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.back-link {
  display: flex;
  color: #0095ff8f;
  text-decoration: none;
}

.back-link:hover {
  /* text-decoration: underline; */
}
.back-link:active{
  color: #0095ff;
}

.search-bar {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.descriptions {
  padding: 20px;
}
</style>